import 'package:flutter/material.dart';

import 'fonts/SignFonts.dart';

class SignPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return SignPageState();
  }
}

class SignPageState extends State<StatefulWidget>{

  bool _isLogin = true;
  bool _isObscure = true;
  Color btn11 = const Color(0xFF0987FF);
  Color btn12 = const Color(0xFFFFFFFF);
  final TextEditingController _controller = TextEditingController();

  Widget changeWidget(bool isLogin){
    return isLogin?
        Container(
          width: 380.0,
          height: 346.0,
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                    alignment: Alignment.center,
                    width: 380.0,
                    height: 50.0,
                    child: const Text('Sign In',style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold
                    ),),
                  )
                ],
              ),Row(
                children: [
                  Container(
                    margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
                    width: 360.0,
                    height: 100.0,
                    child: TextFormField(
                      controller: _controller,
                      decoration: const InputDecoration(
                        // contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 10),
                        //placeholder
                          hintText: 'Email',
                          prefixIcon: IconButton(
                            onPressed: null,
                            icon: Icon(SignFonts.email),
                          )),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  Container(
                    margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
                    width: 360.0,
                    height: 100.0,
                    child: TextFormField(
                      obscureText: _isObscure,
                      decoration: InputDecoration(
                        // contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 10),
                        //placeholder
                          hintText: 'Passowrd',
                          prefixIcon: const IconButton(
                            onPressed: null,
                            icon: Icon(SignFonts.lock),
                          ),
                          suffixIcon: IconButton(
                              onPressed: (){
                                setState(() {
                                  _isObscure = !_isObscure;
                                });
                              },
                              icon: Icon(_isObscure?SignFonts.eyeClose:SignFonts.eye)
                          )
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 380.0,
                    height: 80.0,
                    alignment: Alignment.center,
                    child: OutlinedButton(
                      onPressed: (){
                        setState(() {
                          //路由
                          _isLogin = true;
                          _controller.clear();
                        });
                      },
                      style: OutlinedButton.styleFrom(
                        //按钮背景颜色
                          backgroundColor: btn11,
                          foregroundColor: btn12,
                          padding: const EdgeInsets.fromLTRB(0, 17, 0, 17),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8.0)),
                          side: const BorderSide(
                              width: 1, color: Color(0xFF0987FF))),
                      child: const SizedBox(
                        width: 240,
                        height: 30,
                        child: Row(
                          children: [
                            Expanded(child: Icon(SignFonts.click)),
                            Expanded(child: Text("Sign In"))
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              )
            ],
          ),
        ):Container(
      width: 380.0,
      height: 346.0,
      child: Column(
        children: [
          Row(
            children: [
              Container(
                alignment: Alignment.center,
                width: 380.0,
                height: 50.0,
                child: const Text('Sign Up',style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold
                ),),
              )
            ],
          ),Row(
            children: [
              Container(
                margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
                width: 360.0,
                height: 100.0,
                child: TextFormField(
                  decoration: const InputDecoration(
                    // contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 10),
                    //placeholder
                      hintText: 'Email',
                      prefixIcon: IconButton(
                        onPressed: null,
                        icon: Icon(SignFonts.email),
                      )),
                ),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                margin: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
                width: 360.0,
                height: 100.0,
                child: TextFormField(
                  obscureText: _isObscure,
                  decoration: InputDecoration(
                    // contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 10),
                    //placeholder
                      hintText: 'Passowrd',
                      prefixIcon: const IconButton(
                        onPressed: null,
                        icon: Icon(SignFonts.lock),
                      ),
                      suffixIcon: IconButton(
                          onPressed: (){
                            setState(() {
                              _isObscure = !_isObscure;
                            });
                          },
                          icon: Icon(_isObscure?SignFonts.eyeClose:SignFonts.eye)
                      )
                  ),
                ),
              ),
            ],
          ),
          Row(
            children: [
              Container(
                width: 380.0,
                height: 80.0,
                alignment: Alignment.center,
                child: OutlinedButton(
                  onPressed: (){
                    setState(() {
                      //路由
                      _isLogin = true;
                    });
                  },
                  style: OutlinedButton.styleFrom(
                    //按钮背景颜色
                      backgroundColor: btn11,
                      foregroundColor: btn12,
                      padding: const EdgeInsets.fromLTRB(0, 17, 0, 17),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0)),
                      side: const BorderSide(
                          width: 1, color: Color(0xFF0987FF))),
                  child: const SizedBox(
                    width: 240,
                    height: 30,
                    child: Row(
                      children: [
                        Expanded(child: Icon(SignFonts.click)),
                        Expanded(child: Text("Sign Up"))
                      ],
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    //Row表示所有子元素排列在一行
    return Column(
      children: [
        Row(
          children: [
            Expanded(
                child: OutlinedButton(
                  onPressed: (){
                    setState(() {
                      _isLogin = true;
                    });
                  },
                  style: OutlinedButton.styleFrom(
                    //按钮背景颜色
                      backgroundColor: _isLogin ? btn11 : btn12,
                      foregroundColor: _isLogin ? btn12 : btn11,
                      padding: const EdgeInsets.fromLTRB(0, 17, 0, 17),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(1.0)),
                      side: const BorderSide(
                          width: 1, color: Color(0xFF0987FF))),
                  child: const Text('Sign In'),
                )
            ),
            Expanded(
                child: OutlinedButton(
                  onPressed: (){
                    setState(() {
                      _isLogin = false;
                      _controller.clear();
                    });
                  },
                  style: OutlinedButton.styleFrom(
                    //按钮背景颜色
                      backgroundColor: _isLogin ? btn12 : btn11,
                      foregroundColor: _isLogin ? btn11 : btn12,
                      padding: const EdgeInsets.fromLTRB(0, 17, 0, 17),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(1.0)),
                      side: const BorderSide(
                          width: 1, color: Color(0xFF0987FF))),
                  child: const Text('Sign Up'),
                )
            ),
          ],
        ),
        Row(
          children: [
            changeWidget(_isLogin)
          ],
        )
      ],
    );
  }

}